<template>
  <div class="search-list">
    <template v-for="item in listData" :key="item.unitId">
      <div class="item" @click="clickInfos">
        <div class="swiper-wrapper">
          <van-swipe
            class="banner"
            indicator-color="white"
            lazy-render
            v-if="item.preloadHouse"
          >
            <template v-for="(i, k) in item.pictureList" :key="k">
              <van-swipe-item><img :src="i" alt="" /></van-swipe-item>
            </template>
          </van-swipe>
          <div class="banner" v-else>
            <img :src="item.defaultPicture" alt="" />
          </div>
          <div class="landlordInfo">
            <div class="hotelLogo">
              <img
                :src="item.logoUrl || item.preloadHouse.landlordInfo.hotelLogo"
                alt=""
              />
            </div>
            <div class="favoriteCount">
              <van-icon name="like" class="icon-like" />
              <div v-if="item.favoriteCount">{{ item.favoriteCount }}</div>
            </div>
            <div class="totalCount">
              <van-icon name="chat-o" class="icon-chat" />
              <div>
                {{
                  item.commentBriefForCD.totalCount ||
                  item.preloadHouse.totalCount
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="text-infos">
          <div class="top">
            <span class="address">{{ item.address }} </span>
            <div>
              <template v-for="(i, k) in item.unitSummeries" :key="k">
                <span style="margin-right: 2px">||</span
                ><span>{{ i.text }}</span>
              </template>
            </div>
          </div>
          <div class="title">
            {{ item.unitName }}
          </div>
          <div class="tags">
            <template v-for="(i, k) in item.houseTags" :key="k">
              <span
                :style="{ color: i.color, backgroundColor: i.background.color }"
                class="tag-item"
                >{{ i.text }}</span
              >
            </template>
          </div>
        </div>
        <div class="price">
          <div class="finalPrice">￥{{ item.finalPrice }}</div>
          <div class="productPrice">￥{{ item.productPrice }}</div>
          <div class="tag" v-if="item.priceTipBadge">
            {{ item?.priceTipBadge?.text }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { computed } from "@vue/reactivity";
const props = defineProps({
  listData: {
    type: Array,
    default: () => [],
  },
});
// 整理要加载的数据
const swiperData = computed(() => {
  let data = props.listData;
});
</script>

<style lang="less" scoped>
.search-list {
  padding: 15px 15px 0 15px;
  .item {
    margin: 6px 0;
    .swiper-wrapper {
      position: relative;
      width: 100%;
      .banner {
        width: 100%;
        img {
          width: 100%;
          border-radius: 6px;
          margin-bottom: 7px;
        }
      }
      .landlordInfo {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        display: flex;
        flex-direction: column;
        > * {
          margin-top: 18px;
        }
        .hotelLogo {
          width: 100%;
          text-align: center;
          img {
            width: 65%;
            border-radius: 50%;
          }
        }
        .favoriteCount {
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 16px;
          color: #fff;
          text-align: center;
          .icon-like {
            color: #ff6666;
            font-size: 36px;
          }
        }
        .totalCount {
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 16px;
          color: #fff;
          text-align: center;
          .icon-chat {
            font-size: 36px;
            color: #fff;
          }
        }
      }
    }
    .text-infos {
      > * {
        margin: 4px 0;
      }
      .top {
        font-size: 12px;
        color: #1f2430;
        .address {
          background-color: #3f4954;
          color: #fff;
          padding: 0 4px;
          border-radius: 6px;
          margin-bottom: 4px;
        }
      }
      .title {
        font-size: 18px;
        color: #000;
      }
      .tags {
        font-size: 12px;
        .tag-item {
          padding: 2px;
          margin: 0 2px;
        }
      }
    }
    .price {
      display: flex;
      flex-direction: row;
      align-content: center;
      .finalPrice {
        color: var(--color);
        font-size: 16px;
        width: 45px;
        height: 16px;
      }
      .productPrice {
        text-decoration: line-through;
        font-size: 12px;
        color: #ccc;
        line-height: 16px;
        width: 40px;
        height: 16px;
      }
      .tag {
        color: #fff;
      }
    }
  }
}
</style>
